<template>
  <view class="page">
    <view class="head" :style="{ backgroundImage: `url(${sign_bg})` }">
      <text class="title">登录/注册</text>
    </view>
    <view class="main">
      <view class="input-view">
        <view class="options"> +86 </view>
        <v-input
          class="input v-input"
          v-model="phoneNumber"
          height="90"
          placeholder="请输入手机号"
          maxlength="11"
          type="number"
        />
      </view>
      <button
        class="btn btn-primary"
        :class="{ disabled }"
        :disabled="disabled"
        @click="openCode"
      >
        获取验证码
      </button>
      <view class="password-login"
        ><text class="password-text" @click="openPasswordLogin"
          >密码登录</text
        ></view
      >
    </view>
    <view class="hint">未注册的手机号验证后回自动创建账户</view>
  </view>
</template>

<script>
import { imgBaseUrl, imgBaseUrlV1 } from "@/common/config";
import { checkPhone } from "@/utils";
import vInput from "@/components/public/input/input";
export default {
  components: {
    vInput,
  },
  computed: {
    disabled() {
      return !checkPhone(this.phoneNumber);
    },
  },
  data() {
    return {
      logo: imgBaseUrlV1 + "logo_108.png",
      sign_bg: imgBaseUrlV1 + "sign_bg.png",
      phoneNumber: "",
      selectType: "86",
      typeOptions: [
        {
          label: "+86",
          value: "86",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    openCode() {
      if (!this.phoneNumber) {
        this.message.warning("手机号不能为空");
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
        this.message.warning("手机号格式有误");
      } else {
        uni.navigateTo({
          url:
            "/pages/login-code/login-code?prefix=" +
            this.selectType +
            "&phoneNumber=" +
            this.phoneNumber,
        });
      }
    },
    openPasswordLogin() {
      uni.navigateTo({
        url: "/pages/login/login?phone=" + this.phoneNumber,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$color-primary: #3f7dff;
.page {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  background-color: #fff; //113476
  padding-bottom: 100rpx;
  .head {
    position: relative;
    height: 30vh;
    background-color: $color-primary;
    background-size: 100% 80%;
    > .title {
      position: absolute;
      color: #fff;
      font-size: 48rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      bottom: 50rpx;
      left: 40rpx;
    }
  }
  .bg {
    position: absolute;
    z-index: 1;
    width: 100%;
  }
  .logo {
    position: absolute;
    display: block;
    z-index: 1;
    top: 80rpx;
    left: 0;
    right: 0;
    width: 180rpx;
    margin: 0 auto;
  }
}
.main {
  position: relative;
  z-index: 2;
  padding: 60rpx 30rpx;

  .title {
    padding-top: 320rpx;
    padding-bottom: 80rpx;
    display: block;
    text-align: center;
    font-size: 44rpx;
    color: #fff;
    letter-spacing: 3rpx;
  }
  .input-view {
    display: flex;
    flex-direction: row;
    border-radius: 4rpx;
    overflow: hidden;
    background: #f6f6f6;
    margin-bottom: 60rpx;
    .options {
      position: relative;
      display: flex;
      width: 120rpx;
      flex: 0 0 120rpx;
      color: $color-primary;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      &:after {
        position: absolute;
        content: "";
        width: 1rpx;
        height: 42rpx;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #d8d8d8;
      }
    }
    .dropdown {
      flex: 0;
      padding: 0 30rpx;
    }
    .input {
      flex: 1;
    }
  }
  .password-login {
    text-align: center;
    font-size: 28rpx;
    color: $color-primary;
    padding-top: 20rpx;

    .password-text {
      display: inline-block;
      padding: 30rpx;
      padding-top: 20rpx;
    }
  }
}
.hint {
  position: absolute;
  display: block;
  width: 100%;
  padding: 30rpx;
  bottom: 0;
  font-size: 26rpx;
  color: #fff;
  text-align: center;
  color: $color-primary;
}
</style>